// 导入官方库
import React from 'react';
import { withRouter } from 'react-router-dom';

//导入redux公共状态
import {connect} from 'react-redux';
import actions from '../../../store/actions/action'

// 导入自定义库
import './header.less';
import SignIn from '../../../components/user/signIn/SignIn';

class Header extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return <div className='g-topbar'>
            <div className="m-top">
                <div className="topmain">
                    <h2><a href="#">网易云音乐</a></h2>
                    <ul className="navlist">
                        <li className="active"><a href="#">发现音乐</a></li>
                        <li><a href="#">我的音乐</a></li>
                        <li><a href="#">朋友</a></li>
                        <li><a href="#">商城</a></li>
                        <li><a href="#">音乐人</a></li>
                        <li><a href="#">下载客户端</a></li>
                    </ul>
                    <div className="topright">
                        <div className="search">
                            <input type="text" placeholder="音乐/视频/电台/用户" ref='inp' onKeyDown={ev => {
                                if(ev.keyCode===13) {
                                    this.searchHandle();
                                }
                            }} />
                        </div>
                        <a href="#" className="dever">创作者中心</a>
                        <a href="#" className="login">登录</a>
                    </div>
                </div>
            </div>
            <div className="g_nav2">
                <div className="navmain">
                    <ul className="nav2list">
                        <li><a href="#" className="active">推荐</a></li>
                        <li><a href="#">排行榜</a></li>
                        <li><a href="#">歌单</a></li>
                        <li><a href="#">主播电台</a></li>
                        <li><a href="#">歌手</a></li>
                        <li><a href="#">新碟上架</a></li>
                    </ul>
                </div>
            </div>
            {/* 用户面板组件 */}
            <div className="user-board" style={{ display: 'none' }}>
                <SignIn />
            </div>
        </div>;
    }
    searchHandle() {
        let val = this.refs.inp.value;
        this.props.history.push('/search');
        this.props.querySearchList({val,type:1});
    }
}

export default connect(state=>state.search,actions.search)(withRouter(Header))